<template>
	<div class="my-container d-flex flex-column p-3">
    <el-card class="box-card" shadow="always">
      <div slot="header" class="header">
          <div class="d-flex align-items-center"><i @click="$router.go(-1)" class="pointer el-icon-back font-22 text-primary mr-2"></i>基本信息</div>
      </div>
      <div class="content">
        <el-form
          :model="paramsListData"
          label-width="100px"
          style="display: flex"
        >
          <el-form-item label="报文名称">
            <el-input :disabled="isDisabled" v-model="paramsListData.configName"/>
          </el-form-item>
          <el-form-item label="报文描述">
            <el-input :disabled="isDisabled" v-model="paramsListData.configDes"/>
          </el-form-item>
          <el-form-item label="主题类型">
            <!-- multiple 多选 -->
            <el-select :disabled="isDisabled" v-model="paramsListData.subType">
              <el-option
                v-for="item in typeData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

    </el-card>
		<div class="shadow rounded-lg col my-3 d-flex flex-column">
			<div class="bg-table text-primary pl-3 font-weight-bold font-16">设备详情</div>
			<div class="col d-flex over-auto p-3">
				<el-table v-loading="loading" class="col" border :data="deviceTableData" height="100%"
					ref="tableRef">
					<el-table-column prop="deviceName" label="设备名称" align="center">
					</el-table-column>
					<el-table-column prop="deviceCode" label="设备编码" align="center">
					</el-table-column>
					<el-table-column prop="deviceDes" label="设备描述" align="center">
					</el-table-column>
					<el-table-column prop="channel" label="通道号" align="center">
					</el-table-column>
				</el-table>
			</div>
			<pagination class="d-flex justify-content-end" :total="count" :page.sync="pageIndex" :limit.sync="pageSize"
				@pagination="pagination" />
		</div>
	</div>
</template>

<script>
  import {
    queryOneTopicMain
  } from "@/api/settingManagement/protocolMessage"
	export default {
		data() {
			return {
				count:0,
				pageIndex:1,
				pageSize:10,
				// desc: "",
				// agreement: '',
				// heartbeat: ''
        paramsListData: {
          configName: '',
          configDes: '',
          subType: ''
        },
        typeData: [
          {
            label: "设备基础数据",
            value: "SX_FD"
          },
          {
            label: "实时数据",
            value: "SX_CD"
          },
          {
            label: "异常数据",
            value: "SX_ED"
          },
          {
            label: "状态数据",
            value: "SX_SD"
          },
          {
            label: "更改设备开关",
            value: "XX_OF"
          },
          {
            label: "更改设备参数值",
            value: "XX_CD"
          }
        ],
        isDisabled: true,
        loading: false,
        configCode: '',
        deviceTableData: []
			}
		},
    created() {
		  if(this.$route.query.configCode) {
        this.configCode = this.$route.query.configCode
        this.queryOneTopicMain()
      }
    },
    methods: {
      async queryOneTopicMain() {
        this.loading = true
        const data = await queryOneTopicMain({ configCode: this.configCode })
        this.paramsListData.configDes = data.object.configDes
        this.paramsListData.subType = data.object.subType
        this.paramsListData.configName = data.object.configName
        this.deviceTableData = data.object.choseDeviceList || []
        this.count = data.object.count || 0
        this.loading = false
      },
      pagination(pageItem) {
        this.queryOneTopicMain(pageItem.page, pageItem.limit)
      }
    }
  }
</script>

<style>
</style>
